import React from 'react';
import { useHistory } from 'umi';
import { Button, Checkbox, Form, Input } from 'antd';
import { LoginApi, SendSMSApi } from '@/service/user';
import './login.less';
import userIcon from '@/login/userIcon.svg';
import passwordIcon from '@/login/passwordIcon.svg';
import { useState } from 'react';
import Basic from './captcha/captcha';

const App: React.FC = () => {
  const history = useHistory();

  // 验证码
  const [captcha, setCaptcha] = useState('');
  const [phone, setPhone] = useState('');

  const handleCaptchaChange = (value: any) => {
    setCaptcha(value);
  };

  const onFinish = async (values: any) => {
    //判断验证码是否正确
    if (values.captcha !== captcha) {
      alert('验证码错误');
      return;
    }
    const res = await LoginApi(values);
    localStorage.token = res.token;
    localStorage.role = res.role;
    localStorage.menber = res.menber;
    localStorage.discount = res.discount;

    if (res.role == '1') {
      localStorage.masterId = res.id;
    }
    if (res.role == '3') {
      localStorage.uid = res.id;
      history.push('/createRestaurant');
    }

    localStorage.id = res.id;

    history.push('/restaurant');
  };

  const change = (event: any) => {
    setPhone(event.target.value);
  };

  //获取手机验证码
  const getSMS = async () => {
    const res = await SendSMSApi(phone);
    console.log(phone);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="background">
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        className="back"
      >
        <div className="text">欢迎您登录在线订餐系统</div>

        <Form.Item
          name="loginAcc"
          rules={[{ required: true, message: '请输入账号!' }]}
          className="account"
          onChange={change}
        >
          <Input
            placeholder="请输入账号"
            prefix={<img className="login-icon" src={userIcon} />}
          />
        </Form.Item>
        <Button className="SMS" onClick={getSMS}>
          获取验证码
        </Button>

        <Form.Item
          name="loginPwd"
          rules={[{ required: true, message: '请输入密码' }]}
          className="password"
        >
          <Input.Password
            placeholder="请输入密码"
            prefix={<img className="login-icon" src={passwordIcon} />}
          />
        </Form.Item>
        <div className="captcha">
          <Basic onCaptchaChange={handleCaptchaChange}></Basic>
        </div>

        <Form.Item
          name="captcha"
          rules={[{ required: true, message: '请输入验证码' }]}
          className="captchaInput"
        >
          <Input
            placeholder="请输入验证码"
            prefix={<img className="login-icon" src={userIcon} />}
          />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default App;
